import React from "react";

// 函数组件没有生命周期
class Test extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount', 4);
  }

  render() {
    return (
      <>
        count: { this.props.count }
        <button onClick={ () => { this.props.countChange() } }>Add Count</button>
      </>
    )
  }
}

// react类组件
class App extends React.Component {
  constructor() {
    super()
    console.log('constructor', 0);
    console.log(this.state);
  }

  state = {
    count: 0,
    flag: true
  }

  countChange = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  changeUnMountDOM = () => {
    this.setState({
      flag: !this.state.flag
    })
  }

  componentDidMount() {
    console.log('componentDidMount', 2);
  }

  componentDidUpdate() {
    console.log('componentDidUpdate', 3);
  }

  // 渲染ui结构
  render() {
    console.log('render', 1);
    console.log(this.state);
    return (
      <>
        { this.state.flag ? <Test count={ this.state.count } countChange={ this.countChange }></Test> : "" }
        <button onClick={ this.changeUnMountDOM }>Unmount</button>
      </>
    )
  }
}

export default App;
